<template>
	<view class="edit">

		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-navigate">
					<view>收货人：</view>
					<view><input type="text" v-model="recipients" class="input-clear" placeholder="请输入收货人姓名" /></view>
				</view>
			</view>
			<view class="uni-list-cell">
				<view class="uni-list-cell-navigate">
					<view>手机号：</view>
					<view><input type="text" v-model="mobile" class="input-clear" placeholder="请输入收货人手机号码" /></view>
				</view>
			</view>
			<view class="uni-list-cell" @click="showMulLinkageThreePicker">
				<view class="uni-list-cell-navigate uni-navigate-right">
					<view>省、市、区</view>
					<view class="text-gray area-name">{{areaname}}</view>
				</view>
			</view>
			<view class="uni-list-cell">
				<view class="uni-list-cell-navigate">
					<view>详细地址：</view>
					<view><input type="text" v-model="address" class="input-clear" placeholder="请输入详细地址" /></view>
				</view>
			</view>
		</view>

		<view class="default" @tap="is_default = is_default == 1?0:1">
			<image :src="is_default==1?'/static/icon/selected.png':'/static/icon/she.png'"></image> 设置为默认收货地址
		</view>
		
		<view class="content">
			<textarea  v-model="content" placeholder="分享你的购买心得" />
			
		</view>
		
		<view class="upload-img">
			<view class="item" v-for="(img, imgIndex) in images" :key="imgIndex">
				<image :src="img" mode="aspectFill"></image>
			</view>
			<view class="item upload">
				<image src="../../static/upload_icon.png" @tap="uploadImg()"  mode="aspectFill"></image>
				
			</view>
		</view>

        <view  class="btn btn-theme btn-block" @tap="add()">保存</view>
		
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import Request from '../../common/request.js';
	import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue';
	
	
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				id:'',
				recipients:'',
				mobile: '',
				address: '',
				province_id: '',
				city_id: '',
				area_id: '',
				areaname: '选择地区',
				is_default: 1,
				themeColor: '#007AFF',
				cityPickerValueDefault: [0, 0, 1],
				images: [],
				content: ''
			};
		},
		onLoad(options) {
			this.id = options.id ? options.id : '';
			this.recipients = options.recipients ? options.recipients : '';
			this.mobile = options.mobile ? options.mobile : '';
			this.address = options.address ? options.address : '';
			this.province_id = options.province_id ? options.province_id : '';
			this.city_id = options.city_id ? options.city_id : '';
			
			this.area_id = options.area_id ? options.area_id : '';
			this.is_default = options.is_default ? options.is_default : '';
			if(options.id) {
				this.areaname = options.province+'-'+options.city+'-'+options.area;
				uni.setNavigationBarTitle({
					title:'编辑收货地址'
				})
			}
		},
		methods: {
			add: function(){

					if(!this.recipients){
						Request.alert('收件人姓名不能为空');return;
					}

					if(!this.mobile){
						Request.alert('手机号码不能为空');return;
					}

					var preg = /^1\d{10}$/;
					if(!preg.test(this.mobile)){
						Request.alert('手机号码格式不正确');return;
					}
					if(!this.area_id){
						Request.alert('请选择地区');return;
					}
					if(!this.address){
						Request.alert('详细地址不能为空');return;
					}


					var postData = {
						
						id:this.id,
						recipients:this.recipients,
						mobile: this.mobile,
						address: this.address,
						province_id: this.province_id,
						city_id: this.city_id,
						area_id: this.area_id,
						is_default: this.is_default,
					}
					console.log(postData);


					var that = this;
					var params = {
						url: 'address/editAddress',
						data: postData,
						checkCode: false,
						sCallback: function(res){
							uni.showModal({
								title: res.data.msg
							})
							uni.navigateBack({})
						}
					}
					
					Request.send(params);
					
				},
				// 三级联动选择
				showMulLinkageThreePicker() {
					this.$refs.mpvueCityPicker.show()
				},
				onConfirm(e) {
					
					this.areaname = e.label;
					var ids = e.cityCode.split(',');
					
					this.province_id = ids[0];
					this.city_id = ids[1];
					this.area_id = ids[2];
					
				},
				//上传图片
				uploadImg: function() {
					
					var imgs = this.images;
					if(imgs.length >= 9) {
						Request.alert('最多上传9张');
						return;
					}
					var that = this;
					uni.chooseImage({
						count:9,
						sizeType: ['compressed'],
						success(obj) {
							console.log(obj);
							Request.uploadImg({
								data: obj.tempFilePaths[0],
								sCallback: function(res) {
									that.images.push(res.data.url);
								}
							})
						},
						fail(e) {
							console.log('err');
							console.log(e);
							Request.alert('图片选择出错');
						}
					})
					
					
				}	
		}
	}
</script>

<style>
	page{
		background: #fff;
	}
	.edit {
		font-size: 28upx;
	}

	.edit .uni-list-cell-navigate{
		justify-content: flex-start;
	}
	
	.edit .uni-list-cell-navigate>view:nth-child(1){
		
		width: 160upx;
	}

	.edit .uni-list-cell-navigate>view:nth-child(2){
		display: flex;
		flex: 1;
	}
	
	.edit .area-name{
		justify-content: flex-end;
		margin-right: 20upx;
	}
	.edit input{
		flex: 1;
	}

	.edit .btn{
		height: 80upx;
		width: 90%;
		line-height: 80upx;
		text-align: center;
		color: #fff;
		background: #e60012;
		border-radius: 40upx;
		margin-left: 5%;
		margin-top: 80upx;
	}

	.edit .default{
		background: #fff;
		/*margin-top: 10upx;*/
		display: flex;
		height: 80upx;
		align-items: center;
		padding: 0 20upx;
	}

	.edit .default image{
		width: 50upx;
		height: 50upx;
		margin-right: 20upx;
	}
	
	.upload-img .item{
		width: 180upx;
		height: 180upx;
		
		padding: 10upx;
	}
	
	.upload-img .item image{
		max-height: 160upx;
		max-width: 160upx;
	}
	
	.content{
		width: 100%;
		padding: 20upx;
		display: flex;
		box-sizing: border-box;
	}
	
	textarea{
		flex: 1;
		font-size: 28upx;
		/* border: 1upx solid red; */
		height: 120upx;
		overflow-y: scroll;
	}
</style>
